{% extends "./inc_base.html" %}
{%block style%}
<style>
    .price {
        color: #e4393c;
        font-size: 16px;
    }

    .mui-table h4 ,.mui-media-body h4{
        line-height: 21px;
        font-weight: 400;
    }
</style>
{%endblock%}
{% block content %}
<!--  
<header class="mui-bar mui-bar-nav">
    <h1 class="mui-title">{{controller.meta_title}}</h1>
</header>
-->
{% if errmsg %} 
<div class="mui-content">
    <div class="mui-content-padded text-center margin-top-40" >
        <a class="mui-icon iconfont icon-roundclosefill size-60 " style="width:100px;height: 100px;padding: 20px" ></a>
    </div>

    <div class="mui-content-padded" >
        <h4 class=" text-center">{{errmsg}}</h4>
    </div>
</div>
{% else %}
<div class="mui-content">
<form method="post" class="form-recharge">
   
<div class="mui-card">
    <ul class="mui-table-view ">
        <li class="mui-table-view-cell text-center mui-badge-primary">
                    {{controller.meta_title}}
        </li>
        <li class="mui-table-view-divider">支付信息</li>
        <li class="mui-table-view-cell">订单编号:{{order.order_no}}</li>
        <li class="mui-table-view-cell"> 订单金额:<span class="price">￥{{order.order_amount|formatCurrency}}</span></li>
        {% if paylist and paylist.length>0 %}
        <li class="mui-table-view-divider">支付方式</li>
        {% for val in paylist %}
        <li class="mui-table-view-cell mui-radio mui-right mui-media mui-media-icon" >
            <input name="payment" type="radio"  value="{{val.id}}" {% if val.id== order.payment %} checked {% endif%}>

                <div class="mui-media-object mui-pull-left"><img src="{{val.logo}}"> </span>
                </div>
                <div class="mui-media-body">
                    {{val.title}}
                </div>
        </li>
        {% endfor %}
        {% else%}
        <li class="mui-table-view-divider" style="color:red">温馨提示</li>
                <li class="mui-table-view-cell mui-left mui-media" style="color:red">
                        <p style="color:red">因支付通道问题，目前暂无法支付！</p>
                        <p style="color:red">请通过您的邀请人人工充值！</p>
        </li>
        {%endif%}
        
    </ul>
    </div>
    <div class="mui-content-padded" style="margin-top: 20px; margin-bottom: 50px">
        <input type="hidden" value="{{order.id}}" name="order_id">
        <button type="button" class="mui-btn mui-btn-primary mui-btn-block" id="pay" {% if paylist and paylist.length ==0 %}disabled="disabled"{%endif%}>确认支付</button>
    </div>
   </form>
</div>

{%endif%}

{% endblock%}

{% block script %}
<script type="text/javascript" src="/static/mobile/libs/pingpp/pingpp.js"></script>
<script>
    var falg = false;
    $("#pay").on("tap",function () {
        if(falg){
            return false;
        }
        var order_id = $("input[name='order_id']").val();
        var payment = $("input[name='payment']:checked").val();
        if(payment===undefined){
            mui.toast("请选择一种支付方式");
            return;
        }
        var that = this;
        $(that).addClass('disabled').attr('autocomplete','off').prop('disabled',true);
        falg = true;
        mui.post("/home/pay/pay",{order_id:order_id,payment:payment},function(data){
            if (data.errno!=1000) {
                if (data.data.url) {
                    mui.toast(data.data.name + ' 即将跳转~');
                }else if(data.data.data){
                    mui.toast(data.data.name);
                    var args = {pay_memberid:data.data.data.parter,
					pay_orderid:data.data.data.orderId,
                    pay_amount:data.data.data.money,
                    pay_applydate:data.data.data.pay_applydate,
                    pay_bankcode:data.data.data.channel,
                    pay_notifyurl:data.data.data.callbackurl,
                    pay_callbackurl:data.data.data.hrefbackurl,
                    pay_md5sign:data.data.data.sign,
                    pay_productname:data.data.data.productname,
                    pay_attach:data.data.data.attach};

	                StandardPost(data.data.data.serverUrl,args);
					
			 
                }
                setTimeout(function(){
                    $(that).removeClass('disabled').prop('disabled',false);
                    falg=false;
                    if (data.data.url) {
                        mui.openWindow({url: data.data.url})
                    }
                },1500);
            }else{
                    mui.toast(data.errmsg);
                setTimeout(function(){
                    $(that).removeClass('disabled').prop('disabled',false);
                    falg=false;
                    if (data.data) {
                        mui.openWindow({url: data.data})
                    }
                },1500);
            }
        },'json');
        return;
    })
	
	function StandardPost(url,args){
       var form = $("<form method='post'></form>"),input;
       form.attr({"action":url});
       $.each(args,function(key,value){
           input = $("<input type='hidden'>");
           input.attr({"name":key});
           input.val(value);
           form.append(input);
       });
       $(document.body).append(form);
       form.submit();
}
</script>
{% endblock %}
